<template>
  <div style="padding: 20px">
    <el-row style="margin-bottom:20px">
      <h1>智能问答总览</h1>
    </el-row>
    <!-- <el-row style="margin-left:20px">
      <h2>数据饼图</h2>
    </el-row> -->
    <!-- <div>
      <avue-form ref="optionAddUpdateForm" v-model="obj" :option="option" @submit="submit" />
    </div>
    <div>
      <div class="view">
        <div class="c">乘客投诉/建议数</div>
        <div class="c">乘客投诉/建议处理情况</div>
        <div id="c1" />
        <div id="c2" />
      </div>
      <div class="view">
        <div class="c">乘客遗失物品处理情况</div>
        <div class="c">乘客客伤处理情况</div>
        <div id="c3" />
        <div id="c4" />
      </div>
      <div class="view">
        <div class="c">培训记录数</div>
        <div class="c">培训通过率</div>
        <div id="c5" />
        <div id="c6" />
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  Chart
} from '@antv/g2'
import {
  mapGetters
} from 'vuex'
import {
  getIndex,
  getBirthday
} from './api'
import {
  option,
  birthdayOption
} from './option'
import {
  randomString
} from '@/utils'
import {
  K_Class_Options
} from '@/utils/constant'
import happy from './happy.png'
export default {
  data() {
    return {
      obj: {},
      params: {},
      page: {},
      loading: false,
      option: option(this),
      birthdayOption: birthdayOption(this),
      dialogVisible: false,
      happy: happy,
      birthdayData: [],
      birthdayDataList: [],

      praiseComplaintType: {
        data: [],
        container: 'c1',
        width: 630,
        height: 315
      },
      praiseComplaintResult: {
        data: [],
        container: 'c2',
        width: 630,
        height: 315
      },
      lostItemStatus: {
        data: [],
        container: 'c3',
        width: 630,
        height: 315
      },
      passengerInjuryResult: {
        data: [],
        container: 'c4',
        width: 630,
        height: 315
      },
      trainingRecordCategory: {
        data: [],
        container: 'c5',
        width: 630,
        height: 315
      },
      trainingRecord: {
        data: [],
        container: 'c6',
        width: 630,
        height: 315
      }
    }
  },
  created() {
    // this.refreshData()
  },
  mounted() {
    // this.newChart();
    // this.getIndex()
    // if (this.isAuth('/kmpt/sys/user/birthday:GET')) {
    //   const params = {
    //     pageNum: 1,
    //     pageSize: 6
    //   }
    //   this.getBirthday(params)
    // }
    // this.passengersIdeaFun();
    // this.passengersManageFun();
  },
  methods: {
    refreshData() {
      this.$store.dispatch('site/getSiteList').then((res) => {
        const column = this.findObject(this.option.column, 'siteId')
        column.dicData = res
      })
      // this.$store.dispatch('site/getLineList').then((res) => {
      //   const column = this.findObject(this.option.column, "lineId");
      //   column.dicData = res;
      // })
    },
    looks() {
      this.getBirthday()
      this.dialogVisible = true
    },
    getBirthday(params) {
      var flag = true
      if (!params) {
        this.loading = true
        params = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize
        }
        flag = false
      }
      getBirthday(params).then(res => {
        const data = res.data
        const result = data.list
        if (flag) {
          if (result != null && result.length > 0) {
            this.birthdayData = result
          } else {
            this.birthdayData = []
          }
        } else {
          this.loading = false
          this.page.total = data.total
          if (result != null && result.length > 0) {
            this.birthdayDataList = result
          } else {
            this.birthdayDataList = []
          }
        }
      })
    },
    getIndex() {
      getIndex(this.params).then(res => {
        const result = res.data
        this.praiseComplaintResult.data = result.praiseComplaintResult
        this.passengerInjuryResult.data = result.passengerInjuryResult
        this.trainingRecordCategory.data = result.trainingRecordCategory
        this.trainingRecord.data = result.trainingRecord
        this.lostItemStatus.data = result.lostItemStatus
        this.praiseComplaintType.data = result.praiseComplaintType
        document.getElementById(this.praiseComplaintResult.container).innerHTML = ''
        document.getElementById(this.passengerInjuryResult.container).innerHTML = ''
        document.getElementById(this.trainingRecordCategory.container).innerHTML = ''
        document.getElementById(this.trainingRecord.container).innerHTML = ''
        document.getElementById(this.lostItemStatus.container).innerHTML = ''
        document.getElementById(this.praiseComplaintType.container).innerHTML = ''
        this.praiseComplaintResultFun()
        this.passengerInjuryResultFun()
        this.trainingRecordCategoryFun()
        this.trainingRecordFun()
        this.lostItemStatusFun()
        this.praiseComplaintTypeFun()
      })
    },
    submit(form, done) {
      this.params = {
        siteId: form.siteId
      }
      this.getIndex()
      this.$message.success('搜索成功')
      done()
    },
    praiseComplaintResultFun: function() {
      const data = this.praiseComplaintResult.data
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.praiseComplaintResult.container, // 指定图表容器 ID
        width: this.praiseComplaintResult.width, // 指定图表宽度
        height: this.praiseComplaintResult.height // 指定图表高度
      })

      chart.coordinate('theta', {
        radius: 0.75
      })

      chart.data(data)

      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      chart
        .interval()
        .position('count')
        .color('value')
        .label('value*count', {
          layout: {
            type: 'pie-spider'
          },
          labelHeight: 30,
          content: (obj) => `${obj.value} (${obj.proportion})`,
          labelLine: {
            style: {
              lineWidth: 0.5
            }
          }
        })
        .adjust('stack')
      chart.scale('count', {
        formatter: (val) => {
          val = val
          return val
        }
      })
      chart.interaction('element-active')
      chart.theme({
        'styleSheet': {
          'brandColor': '#5B8FF9',
          'paletteQualitative10': ['#5B8FF9', '#61DDAA', '#65789B', '#F6BD16', '#7262fd', '#78D3F8', '#9661BC',
            '#F6903D', '#008685', '#F08BB4'
          ],
          'paletteQualitative20': ['#5B8FF9', '#CDDDFD', '#61DDAA', '#CDF3E4', '#65789B', '#CED4DE', '#F6BD16',
            '#FCEBB9', '#7262fd', '#D3CEFD', '#78D3F8', '#D3EEF9', '#9661BC', '#DECFEA', '#F6903D', '#FFE0C7',
            '#008685', '#BBDEDE', '#F08BB4', '#FFE0ED'
          ]
        }
      })

      chart.render()
    },

    passengerInjuryResultFun: function() {
      const data = this.passengerInjuryResult.data
      console.log(data)
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.passengerInjuryResult.container, // 指定图表容器 ID
        width: this.passengerInjuryResult.width, // 指定图表宽度
        height: this.passengerInjuryResult.height // 指定图表高度
      })

      chart.coordinate('theta', {
        radius: 0.75
      })

      chart.data(data)

      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      chart
        .interval()
        .position('count')
        .color('value')
        .label('value*count', {
          layout: {
            type: 'pie-spider'
          },
          labelHeight: 20,
          content: (obj) => `${obj.value} (${obj.proportion})`,
          labelLine: {
            style: {
              lineWidth: 0.5
            }
          }
        })
        .adjust('stack')
      chart.scale('count', {
        formatter: (val) => {
          val = val
          return val
        }
      })
      chart.interaction('element-active')
      chart.theme({
        'styleSheet': {
          'brandColor': '#FF6B3B',
          'paletteQualitative10': ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89',
            '#E19348', '#F383A2', '#247FEA'
          ],
          'paletteQualitative20': ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89',
            '#E19348', '#F383A2', '#247FEA', '#2BCB95', '#B1ABF4', '#1D42C2', '#1D9ED1', '#D64BC0', '#255634',
            '#8C8C47', '#8CDAE5', '#8E283B', '#791DC9'
          ]
        }
      })

      chart.render()
    },

    trainingRecordCategoryFun: function() {
      const data = this.trainingRecordCategory.data
      console.log(data)
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.trainingRecordCategory.container, // 指定图表容器 ID
        width: this.trainingRecordCategory.width, // 指定图表宽度
        height: this.trainingRecordCategory.height // 指定图表高度
      })

      chart.coordinate('theta', {
        radius: 0.75
      })

      chart.data(data)

      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      chart
        .interval()
        .position('count')
        .color('value')
        .label('value*count', {
          layout: {
            type: 'pie-spider'
          },
          labelHeight: 20,
          content: (obj) => `${obj.value} (${obj.proportion})`,
          labelLine: {
            style: {
              lineWidth: 0.5
            }
          }
        })
        .adjust('stack')
      chart.scale('count', {
        formatter: (val) => {
          val = val
          return val
        }
      })
      chart.interaction('element-active')
      chart.theme({
        'styleSheet': {
          'brandColor': '#025DF4',
          'paletteQualitative10': ['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A',
            '#007E99', '#FFA8A8', '#2391FF'
          ],
          'paletteQualitative20': ['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A',
            '#007E99', '#FFA8A8', '#2391FF', '#FFC328', '#A0DC2C', '#946DFF', '#626681', '#EB4185', '#CD8150',
            '#36BCCB', '#327039', '#803488', '#83BC99'
          ]
        }
      })

      chart.render()
    },

    trainingRecordFun: function() {
      const data = this.trainingRecord.data
      console.log(data)
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.trainingRecord.container, // 指定图表容器 ID
        width: this.trainingRecord.width, // 指定图表宽度
        height: this.trainingRecord.height // 指定图表高度
      })

      chart.coordinate('theta', {
        radius: 0.75
      })

      chart.data(data)

      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      chart
        .interval()
        .position('count')
        .color('value')
        .label('value*count', {
          layout: {
            type: 'pie-spider'
          },
          labelHeight: 20,
          content: (obj) => `${obj.value} (${obj.proportion})`,
          labelLine: {
            style: {
              lineWidth: 0.5
            }
          }
        })
        .adjust('stack')
      chart.scale('count', {
        formatter: (val) => {
          val = val
          return val
        }
      })
      chart.interaction('element-active')
      chart.theme({
        'styleSheet': {
          'brandColor': '#FF4500',
          'paletteQualitative10': ['#FF4500', '#1AAF8B', '#406C85', '#F6BD16', '#B40F0F', '#2FB8FC', '#4435FF',
            '#FF5CA2', '#BBE800', '#FE8A26'
          ],
          'paletteQualitative20': ['#FF4500', '#1AAF8B', '#406C85', '#F6BD16', '#B40F0F', '#2FB8FC', '#4435FF',
            '#FF5CA2', '#BBE800', '#FE8A26', '#946DFF', '#6C3E00', '#6193FF', '#FF988E', '#36BCCB', '#004988',
            '#FFCF9D', '#CCDC8A', '#8D00A1', '#1CC25E'
          ]
        }
      })

      chart.render()
    },

    lostItemStatusFun: function() {
      const data = this.lostItemStatus.data
      console.log(data)
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.lostItemStatus.container, // 指定图表容器 ID
        width: this.lostItemStatus.width, // 指定图表宽度
        height: this.lostItemStatus.height // 指定图表高度
      })

      chart.coordinate('theta', {
        radius: 0.75
      })

      chart.data(data)

      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      chart
        .interval()
        .position('count')
        .color('value')
        .label('value*count', {
          layout: {
            type: 'pie-spider'
          },
          labelHeight: 20,
          content: (obj) => `${obj.value} (${obj.proportion})`,
          labelLine: {
            style: {
              lineWidth: 0.5
            }
          }
        })
        .adjust('stack')
      chart.scale('count', {
        formatter: (val) => {
          val = val
          return val
        }
      })
      chart.interaction('element-active')
      chart.theme({
        'styleSheet': {
          'brandColor': '#FF6B3B',
          'paletteQualitative10': ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89',
            '#E19348', '#F383A2', '#247FEA'
          ],
          'paletteQualitative20': ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89',
            '#E19348', '#F383A2', '#247FEA', '#2BCB95', '#B1ABF4', '#1D42C2', '#1D9ED1', '#D64BC0', '#255634',
            '#8C8C47', '#8CDAE5', '#8E283B', '#791DC9'
          ]
        }
      })

      chart.render()
    },

    praiseComplaintTypeFun: function() {
      const data = this.praiseComplaintType.data
      console.log(data)
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.praiseComplaintType.container, // 指定图表容器 ID
        width: this.praiseComplaintType.width, // 指定图表宽度
        height: this.praiseComplaintType.height // 指定图表高度
      })

      chart.coordinate('theta', {
        radius: 0.75
      })

      chart.data(data)

      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      chart
        .interval()
        .position('count')
        .color('value')
        .label('value*count', {
          layout: {
            type: 'pie-spider'
          },
          labelHeight: 20,
          content: (obj) => `${obj.value} (${obj.proportion})`,
          labelLine: {
            style: {
              lineWidth: 0.5
            }
          }
        })
        .adjust('stack')
      chart.scale('count', {
        formatter: (val) => {
          val = val
          return val
        }
      })
      chart.interaction('element-active')
      chart.theme({
        'styleSheet': {
          'brandColor': '#FF6B3B',
          'paletteQualitative10': ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89',
            '#E19348', '#F383A2', '#247FEA'
          ],
          'paletteQualitative20': ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89',
            '#E19348', '#F383A2', '#247FEA', '#2BCB95', '#B1ABF4', '#1D42C2', '#1D9ED1', '#D64BC0', '#255634',
            '#8C8C47', '#8CDAE5', '#8E283B', '#791DC9'
          ]
        }
      })

      chart.render()
    }
  }
}
</script>

<style scoped>
  .view {
    margin-top: 7%;
  }

  .c {
    width: 50%;
    display: inline-block;
    text-align: center;
  }

  #c1 {
    width: 50%;
    display: inline-block;
    padding-top: 40px;
  }

  #c2 {
    width: 50%;
    display: inline-block;
    padding-top: 40px;
  }

  #c3 {
    width: 50%;
    display: inline-block;
    padding-top: 40px;
  }

  #c4 {
    width: 50%;
    display: inline-block;
    padding-top: 40px;
  }

  #c5 {
    width: 50%;
    display: inline-block;
    padding-top: 40px;
  }

  #c6 {
    width: 50%;
    display: inline-block;
    padding-top: 40px;
  }
  .item{
    position: relative;
    margin: 0 auto 50px;
    width: 230px;
    height: 340px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #fff;
  }
  .item-img{
    min-width: 100%;
    width: 100%;
    border-radius: 5px 5px 0 0;
  }
  .item-text{
    position: absolute;
    top: 150px;
    padding: 0px 15px;
    width: 100%;
    height: 340px;
    overflow: auto;
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    opacity: .9;
    transition: top .4s;
  }
  .item-text:hover{
    position: absolute;
    top: 0px;
    padding: 0px 15px;
    width: 100%;
    height: 340px;
    overflow: auto;
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    opacity: .9;
    transition: top .4s;
  }
</style>
